<template>
  <Header></Header>
  <div id="container">
    <el-form :model="loginInfo" :label-position="left" ref="rule" :rules="rules">
      <el-row>
        <el-col :xs=24 :sm={span:6,offset:9}>
          <el-form-item label="账号" prop="user">
            <el-input placeholder="请输入账号" prefix-icon="el-icon-user" v-model="loginInfo.user"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :xs="24" :sm={span:6,offset:9}>
          <el-form-item label="密码" prop="password">
            <el-input placeholder="请输入密码" prefix-icon="el-icon-key" show-password v-model="loginInfo.password"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="center">
        <el-form-item>
          <el-button type="primary" @click="submitForm('rule')">登录</el-button>
        </el-form-item>
      </div>
    </el-form>
  </div>
 <CaseNumber></CaseNumber>
</template>

<script>
import Header from "../views/admin/Header";
import md5 from "js-md5";
import axios from 'axios'
import CaseNumber from "../views/CaseNumber"
export default {
  name: "Login",
  components: {
    Header,
    CaseNumber
  },
  data() {
    return{
      loginInfo: {
        user: '',
        password: ''
      },
      rules: {
        user: [
          { required: true, message: '请输入账号' ,trigger: 'blur'},
          { type: 'email',message: '账号格式不对', trigger:'blur'}
        ],
        password: [
          { required: true, message: '请输入密码'},
        ]
      }
    }
  },
  methods: {
    submitForm(value) {
      this.$refs[value].validate((valid) => {
        this.loginInfo.password = md5(this.loginInfo.password);
        if ( valid ){
          axios.post("/admin/verity",this.loginInfo).then( (res) => {
            if ( res.data === true){
              sessionStorage.setItem("user",this.loginInfo.user);
              localStorage.setItem("password",this.loginInfo.password);
              this.$router.push("/login/index")
            }
            else
              this.$message.error("账号或密码错误")
          })
        }
        else {
          console.log("error")
        }
      })
    }
  }
}
</script>

<style scoped>
#container {
  margin-top: 10%;
}
.center {
  text-align: center;
}
</style>